<template>
    <div>
        <h1>this is advance</h1>
        <input v-focus value="我一开始就会获得聚焦">
    </div>
</template>
  
<script>
//  全局注册自定义指令 `v-focus`
// import Vue from 'vue'
// Vue.directive('focus', {
//  //当被绑定的元素插入到 DOM 中时……
//   inserted: function (el) {
//     // 聚焦元素
//     el.focus()
//   }
// })
    export default {
        //注册局部指令。
        directives:{
            focus:{
                inserted: el=>el.focus()
        //  钩子除了inserted外，还有bind,update,componetUpdated,unbind等。
        // bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
        // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
        // update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
        // componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
        // unbind：只调用一次，指令与元素解绑时调用
            }
        }
    }
</script>

<style scoped>

</style>